<template>
  <!-- 显示在中间拖动区域的内容-->
  <div>
    <div class="box-card widget-form-container " shadow="hover">
      <div slot="header" class="clearfix">
        <!-- 表单名称 -->
        <div v-if="data.list.length != 0">
          <span>{{ data.config.formName }}</span>
        </div>
      </div>
      <div class="text item">
        <!--      ${{data.list}}-->
        <el-form
          :size="data.config.size"
          label-suffix=":"
          :label-position="data.config.labelPosition"
          :label-width="data.config.labelWidth + 'px'"
        >
          <div v-if="data.list.length == 0" class="form-empty"></div>

          <!-- 中间的拖拽实现 -->
          <draggable
            class=""
            v-model="data.list"
            v-bind="{
              group: 'people',
              ghostClass: 'ghost',
              animation: 200,
              handle: '.drag-widget'
            }"
            @add="handleWidgetAdd"
          >
            <!-- transition-group 元素之间拖拽换位动画的实现 -->
            <transition-group name="fade" tag="div" class="widget-form-list">
              <template
                v-for="(element, index) in data.list"
                v-if="element && element.key"
              >
                <widget-block
                  v-if="element.type == 'block'"
                  :key="element.key"
                  :element="element"
                  :select.sync="selectWidget"
                  :index="index"
                  :data="data"
                  @select-change="handleSelectChange"
                >
                </widget-block>
                <widget-card
                  v-else-if="element.type == 'card'"
                  :key="element.key"
                  :element="element"
                  :select.sync="selectWidget"
                  :index="index"
                  :data="data"
                  @select-change="handleSelectChange"
                >
                </widget-card>

                <!-- 生成子表走的组件 -->
                <widget-table
                  v-else-if="element.type == 'table'"
                  :key="element.key"
                  :element="element"
                  :select.sync="selectWidget"
                  :index="index"
                  :data="data"
                  @select-change="handleSelectChange"
                >
                </widget-table>
                <!--              tabs-->
                <tabs-block
                  v-else-if="element.type == 'tabs'"
                  :key="element.key"
                  :element="element"
                  :select.sync="selectWidget"
                  :index="index"
                  :data="data"
                  @select-change="handleSelectChange"
                >
                </tabs-block>
                <collapse-block
                  v-else-if="element.type == 'collapse'"
                  :key="element.key"
                  :element="element"
                  :select.sync="selectWidget"
                  :index="index"
                  :data="data"
                  @select-change="handleSelectChange"
                >
                </collapse-block>

                <div-block
                  v-else-if="element.type == 'div'"
                  :key="element.key"
                  :element="element"
                  :select.sync="selectWidget"
                  :index="index"
                  :data="data"
                  @select-change="handleSelectChange"
                >
                </div-block>

                <!-- 生成单行,多行等的组件 -->
                <widget-form-item
                  v-else-if="
                    element.type !== 'grid' && element.type !== 'subTable'
                  "
                  :key="element.key"
                  :element="element"
                  :select.sync="selectWidget"
                  :index="index"
                  :data="data"
                  @select-change="handleSelectChange"
                >
                  <el-row></el-row>
                </widget-form-item>
                <widget-col-item
                  v-else
                  :key="element.key"
                  :element="element"
                  :select.sync="selectWidget"
                  :index="index"
                  :data="data"
                  @select-change="handleSelectChange"
                >
                </widget-col-item>
              </template>
            </transition-group>
          </draggable>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Draggable from "vuedraggable";
import WidgetFormItem from "./WidgetFormItem";
import WidgetColItem from "./WidgetColItem"; // 子表生成组件
import WidgetTable from "./WidgetTable";
import WidgetBlock from "./WidgetBlock";
import TabsBlock from "./widget/tabs/TabsBlock";
import CollapseBlock from "./widget/collapse/CollapseBlock";
import WidgetCard from "./widget/card/WidgetCard";
import DivBlock from "./widget/div/DivBlock";

export default {
  components: {
    Draggable,
    WidgetFormItem,
    WidgetColItem,
    WidgetTable,
    WidgetBlock,
    DivBlock,
    WidgetCard,
    CollapseBlock,
    TabsBlock
  },
  props: ["data", "select"],
  data() {
    return {
      selectWidget: this.select
    };
  },
  mounted() {
    if (document) {
      if (document.body) {
        document.body.ondrop = function(event) {
          let isFirefox =
            navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
          if (isFirefox) {
            event.preventDefault();
            event.stopPropagation();
          }
        };
      }
    }
  },
  methods: {
    handleWidgetChange(added, removed, moved) {
      return false;
    },
    getData() {
      alert(1);
    },
    // 构造当前表单显示的内容
    handleWidgetAdd(evt) {
      const newIndex = evt.newIndex;
      const to = evt.to;
      // console.log(to)

      //为拖拽到容器的元素添加唯一 key
      const key = new Date().getTime() + "";
      this.$set(this.data.list, newIndex, {
        ...this.data.list[newIndex],
        options: {
          ...this.data.list[newIndex].options,
          remoteFunc:
            this.data.list[newIndex].options.remoteFunc || "func_" + key
        },
        key,
        // 绑定键值
        model: this.data.list[newIndex].model
          ? this.data.list[newIndex].model
          : this.data.list[newIndex].type + "_" + key,
        rules: this.data.list[newIndex].rules
          ? [...this.data.list[newIndex].rules]
          : []
      });

      if (Object.keys(this.data.list[newIndex].options).includes("options")) {
        this.$set(this.data.list, newIndex, {
          ...this.data.list[newIndex],
          options: {
            ...this.data.list[newIndex].options,
            options: [
              ...this.data.list[newIndex].options.options.map(item => ({
                ...item
              }))
            ]
          }
        });
      }

      if (Object.keys(this.data.list[newIndex]).includes("columns")) {
        this.$set(this.data.list, newIndex, {
          ...this.data.list[newIndex],
          columns: [
            ...this.data.list[newIndex].columns.map(item => ({
              ...item,
              list: [...item.list]
            }))
          ]
        });
      }

      if (Object.keys(this.data.list[newIndex]).includes("tableColumns")) {
        this.$set(this.data.list, newIndex, {
          ...this.data.list[newIndex],
          tableColumns: [...this.data.list[newIndex].tableColumns]
        });
      }

      this.selectWidget = this.data.list[newIndex];
    },
    handleWidgetDelete(index) {
      if (this.data.list.length - 1 === index) {
        if (index === 0) {
          this.selectWidget = {};
        } else {
          this.selectWidget = this.data.list[index - 1];
        }
      } else {
        this.selectWidget = this.data.list[index + 1];
      }

      this.$nextTick(() => {
        this.data.list.splice(index, 1);
      });
    },
    handleSelectChange(index) {
      //console.log('select-change', index)
      setTimeout(() => {
        index >= 0
          ? (this.selectWidget = this.data.list[index])
          : (this.selectWidget = {});
      });
    }
  },
  watch: {
    select(val) {
      //  console.log(val,11);
      this.selectWidget = val;
    },
    // 监听变化重写字段属性文件
    selectWidget: {
      handler(val) {
        this.$emit("update:select", val);
      },
      deep: true
    }
  }
};
</script>

<style lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
 {
  opacity: 0;
}

.form-empty {
  position: absolute;
  text-align: center;
  width: 300px;
  font-size: 20px;
  top: 200px;
  left: 50%;
  margin-left: -150px;
  color: #ccc;
}

.form-name {
  line-height: 35px;
}

h3 {
  padding: 0px 32px;
}

.is_req {
  .el-form-item__label::before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
  }
}
</style>
